<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2姓名案例-methods实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			#root {
				display: flex;
				flex-direction: column;
			}

			#child {
				display: flex;
				margin-top: 10px;
				flex-direction: row;
			}
		</style>
	</head>
	<!-- 
		计算属性:
		1.定义:要用的属性不存在，要通过已有属性计算得到。
		2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter。
		3.get函数什么时候执行?
		(1).初次读取时会执行一次。
		(2).当依赖的数据发生改变时会被再次调用。
		4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
		5.备注:
		1.计算属性最终会出现在vm上，直接读取使用即可。如：全名：{{fullName}}
		2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
		3.计算属性是通过返回值决定东西的。监视属性里面的handler有个value，计算属性没有这个value。
	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<div id="child">
				姓：<input type="text" v-model="firstName" />
			</div>
			<div id="child">
				名：<input type="text" v-model="lastName" />
			</div>
			<!-- get什么时候调用?比如下面调用了多次fullName,那么get调用了几次？
				只调用了1次。get只在一下情况下才会调用：
				1.初次读取fullName时。2.所依赖的数据发生变化时。
				这一点比使用methods的效率高。methods会重复调用。
			-->
			全名：{{fullName}}<br />
			全名：{{fullName}}<br />
			全名：{{fullName}}<br />
			全名：{{fullName}}
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		const vm = new Vue({
			el: '#root',
			//属性在data中定义，计算属性需要新的配置项computed
			data: {
				firstName: '张',
				lastName: '三'
			},
			computed: {
				//计算属性需要把计算过程配置成一个对象。
				fullName: {
					//get有什么作用?当有人读取fullNajme时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
					get() {
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set不是必须要写的，如果fullName只是读取不需要修改，就没必要set方法。
					//get什么时候调用?当fullName被修改时。
					set(value) {
						console.log("@", value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>